<template>
	<view class="checker" :style="{ 'gap': `${ props.gap }rpx`,'--primary-color': props.currentBg }">
		<view 
			class="checker-item" 
			v-for="(item,index) in props.list"
			:key="item.key"
			:class="{ 'checker-item-current': currentIndex == index}"
			:style="{ 'border-radius': props.shape == 'circle' ? '50%': 0 }"
			@click="currentChange(index)"
		>{{ item.value }}</view>
	</view>
</template>

<script setup>
import { ref,defineProps } from 'vue'
/**
 * checker 选择
 * @description 
 * @property {Array} barType 数据源
 * @property {String} currentBg 高亮颜色
 * @property {Number} gap 间隔
 * @property {String} shape 形状
 */
const props = defineProps({
	list: {
		type: Array,
		default: []
	},
	currentBg: {
		type: String,
		default: 'green'
	},
	gap: {
		type: Number,
		default: 0
	},
	shape: {
		type: String,
		default: 'square'
	}
});

const currentIndex = ref(0);
const currentChange = (index) => {
	currentIndex.value = index;
}
</script>

<style lang="scss">
.checker {
	display: flex;
	gap: 20rpx;
	.checker-item {
		height: 100rpx;
		width: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border: 1rpx solid #ccc;
		box-sizing: border-box;
		&.checker-item-current {
			border-color: var(--primary-color);
			color: var(--primary-color);
		}
	}
}
</style>